<template>
  <div class="page-header-index-wide">
    <a-row :gutter="8">
      <a-col :sm="4" :md="4" :xl="4">
        <div class="ant-card-body" >
          <div class="acb-content">
            <span class="chart-card-title">
              <img src="@/assets/enterprise-overview/icon4.png" width="20" height="20" style="margin-bottom: 3px"/>
              填报销售额(万元)
            </span>
            <div  class="total">
              <!--<span style="display: inline-block;width: 30px"></span>-->
              <span class="f-size" v-if="enterpriseNum.transactionFinalPrice!=null">{{enterpriseNum.transactionFinalPrice/10000}}<span class="f-unit">万元</span></span>
              <span class="f-size" v-if="enterpriseNum.transactionFinalPrice==null">0</span>
            </div>
          </div>
          <div class="acb-date"><div style="width: 21px;height: 20px;display: inline-block"></div>截止：2020-1-1</div>
        </div>
      </a-col>
      <a-col :sm="4" :md="4" :xl="4">
        <div class="ant-card-body" >
          <div class="acb-content">
            <span class="chart-card-title">
              <img src="@/assets/enterprise-overview/icon3.png" width="20" height="20" style="margin-bottom: 3px"/>
              填报销售记录(辆)
            </span>
            <div class="total">
              <!--<span style="display: inline-block;width: 30px"></span>-->
              <span class="f-size">{{enterpriseNum.transaction}}</span>
            </div>
          </div>
          <div class="acb-date"><div style="width: 21px;height: 20px;display: inline-block"></div>截止：2020-1-1</div>
        </div>
      </a-col>
      <a-col :sm="4" :md="4" :xl="4">
        <div class="ant-card-body" >
          <div class="acb-content">
            <span class="chart-card-title">
              <img src="@/assets/enterprise-overview/icon1.png" width="20" height="20" style="margin-bottom: 3px"/>
              下级企业数(个)
            </span>
            <div  class="total">
              <!--<span style="display: inline-block;width: 30px"></span>-->
              <span class="f-size" v-if="enterpriseNum.enterprise!=-1">{{enterpriseNum.enterprise}}<span class="f-unit">个</span></span>
              <span class="f-size" v-if="enterpriseNum.enterprise==-1">0<span class="f-unit"></span></span>
            </div>
          </div>
          <div class="acb-date"><div style="width: 21px;height: 20px;display: inline-block"></div>截止：2020-1-1</div>
        </div>
      </a-col>
      <a-col :sm="4" :md="4" :xl="4">
        <div class="ant-card-body" >
          <div class="acb-content">
            <span class="chart-card-title">
              <img src="@/assets/enterprise-overview/icon2.png" width="20" height="20" style="margin-bottom: 3px"/>
              销售顾问数(位)
            </span>
            <div class="total">
              <!--<span style="display: inline-block;width: 30px"></span>-->
              <span class="f-size">{{enterpriseNum.salesInfo}}</span><span class="f-unit"></span>
            </div>
          </div>
          <div class="acb-date"><div style="width: 21px;height: 20px;display: inline-block"></div>截止：2020-1-1</div>
        </div>
      </a-col>
      <a-col :sm="4" :md="4" :xl="4">
        <div class="ant-card-body" >
          <div class="acb-content">
            <span class="chart-card-title">
              <img src="@/assets/enterprise-overview/icon6.png" width="20" height="20" style="margin-bottom: 8px"/>
              优秀企业（家）
              <div  class="total" >
                <!--<span style="display: inline-block;width: 30px"></span>-->
                <span class="f-size">4</span><span class="f-unit"></span>
              </div>
            </span>
          </div>
          <div class="acb-date"><div style="width: 21px;height: 20px;display: inline-block"></div>截止：2020-1-1</div>
        </div>
      </a-col>
      <a-col :sm="3" :md="3" :xl="3">
        <div class="ant-card-body" >
          <div class="acb-content">
            <span class="chart-card-title">
              <img src="@/assets/enterprise-overview/icon5.png" width="20" height="20" style="margin-bottom: 8px"/>
              标兵数(位)
            </span>
            <div  class="total" >
              <!--<span style="display: inline-block;width: 30px"></span>-->
              <span class="f-size">23</span><span class="f-unit"></span>
            </div>
          </div>
          <div class="acb-date"><div style="width: 21px;height: 20px;display: inline-block"></div>截止：2020-1-1</div>
        </div>
      </a-col>
    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '12px'}">
          <a-tab-pane loading="true" tab="汽车销量监测" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24" v-if="barData!=null" >
               &nbsp; <span>本集团（企业）123每月销售情况</span>
<!--                <bar-and-line :height="height"/>-->
                <bar-line-chart :height="height"/>
              </a-col>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24" v-else >
                <span >暂无数据</span>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <span>集团（企业）本市范围内销售量</span>
                <sell-pie title="销售占比" :height="height"></sell-pie>

              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

    <a-card :loading="loading" :bordered="false" title="" :body-style="{marginTop: '24px', padding: '0'}">
      <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '12px'}">
        <a-tab-pane loading="true" tab="服务质量监测" key="1">
          <a-row style="padding-top: 24px;">
            <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24" >
              <rank-list  title="企业诉求记录排行" :list="rankList"/>
              <span></span>
            </a-col>
            <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"  >
              <good-model  title="诉求处理效率排行" :list="goodModel"/>
            </a-col>
            <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
              <good-model  title="客户满意度排行" :list="goodClient"/>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>
    </a-card>


  </div>
</template>

<script>
  import ChartCard from '@/components/ChartCard'
  import ACol from "ant-design-vue/es/grid/Col"
  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
  import MiniArea from '@/components/chart/MiniArea'
  import MiniBar from '@/components/chart/MiniBar'
  import MiniProgress from '@/components/chart/MiniProgress'
  import RankList from '@/components/chart/RankList'
  import Bar from '@/components/chart/Bar'
  import LineChartMultid from '@/components/chart/LineChartMultid'
  import HeadInfo from '@/components/tools/HeadInfo.vue'
  import Pie from '@/components/chart/Pie'
  import CreditCorpPie from '@/components/chart/CreditCorpPie'
  import ComplaintRecordPie from '@/components/chart/ComplaintRecordPie'
  import SellPie from '@/components/chart/Sell-Pie'
  import GoodModel from '@/components/chart/GoodModel'
  import BarAndLine from '@/components/chart/BarAndLine'
  import BarLineChart from '@/components/chart/BarLineChart'

  import Trend from '@/components/Trend'
  import { getLoginfo,getEnterpriseNum,getTransaction,getRankList,getSalesList } from '@/api/api'
  import { USER_INFO } from '@/store/mutation-types'
  import Vue from 'vue'

  const rankList = [
    {
     name: '上海******服务有限公司',
      total: '51'
    },
    {
      name: '上海******服务有限公司',
      total: '42'
    },
    {
       name: '上海******服务有限公司',
      total: '36'
    },
    {
       name: '上海******服务有限公司',
      total: '21'
    },
    {
      name: '上海******服务有限公司',
      total: '10'
    }
  ]
  const barData = []
  export default {
    name: "IndexChart",
    components: {
      ATooltip,
      ACol,
      ChartCard,
      MiniArea,
      MiniBar,
      MiniProgress,
      RankList,
      Bar,
      Trend,
      LineChartMultid,
      HeadInfo,
      Pie,
      ComplaintRecordPie,
      CreditCorpPie,
      SellPie,
      GoodModel,
      BarAndLine,
      BarLineChart
    },
    data() {
      return {
        loading: true,
        center: null,
        rankList,
        barData,
        enterpriseNum:{},
        loginfo:{},
        visitFields:['诉求量','资讯量'],
        height: 300,
        visitInfo:[],
        indicator: '<a-icon type="loading" style="font-size: 24px" spin />',
        goodModel: [
          {
            name: '上海******服务有限公司',
            total: '100%'
          },
          {
           name: '上海******服务有限公司',
            total: '98%'
          },
          {
           name: '上海******服务有限公司',
            total: '97%'
          },
          {
             name: '上海******服务有限公司',
            total: '96%'
          },
          {
             name: '上海******服务有限公司',
            total: '95%'
          }
        ],
        goodClient:[
          {
             name: '上海******服务有限公司',
            total: '100%'
          },
          {
            name: '上海******服务有限公司',
            total: '98%'
          },
          {
            name: '上海******服务有限公司',
            total: '97%'
          },
          {
            name: '上海******服务有限公司',
            total: '96%'
          },
          {
           name: '上海******服务有限公司',
            total: '94%'
          }
        ]
      }
    },
    created() {
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
      this.initLogInfo();
    },
    methods: {
      initLogInfo () {
        let userinfo = Vue.ls.get(USER_INFO);
        let params = {
          enterpriseUscc : userinfo.enterpriseUscc
        }
        getEnterpriseNum(params).then((res)=>{
          if(res.success){
            this.enterpriseNum = res.result;
          }
        })
        getTransaction(params).then((res)=>{
          if(res.success){
            if(res.result!=null){
              this.barData = res.result;
            }
          }
        })
        //接口占时注释
        // getRankList(params).then((res)=>{
        //   console.log(res)
        //   if(res.success){
        //     if(res.result!=null){
        //       this.rankList = res.result;
        //     }
        //   }
        // })
        // getSalesList(params).then((res)=>{
        //   console.log(res)
        //   if(res.success){
        //     if(res.result!=null){
        //       this.goodModel = res.result;
        //     }
        //   }
        // })
        getLoginfo(null).then((res)=>{
          if(res.success){
            Object.keys(res.result).forEach(key=>{
              res.result[key] =res.result[key]+""
            })
            this.loginfo = res.result;
          }
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  .ant-card-body {
    padding: 24px 0;
    .acb-content {
      border-bottom:1px solid #e8e8e8;
      .f-size {
        font-size: 32px;
        display: inline-block;
        padding-left: 25px;
      }
      .f-unit {
        font-size: 18px;
        display: inline-block;
        padding: 0 5px;
      }
    }
    .acb-date {
      font-size: 10px;
    }
  }
  .chart-card-title {
    font-size: 18px;
  }
  .circle-cust{
    position: relative;
    top: 28px;
    left: -100%;
  }
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  /* 首页访问量监测 */
  .head-info {
    position: relative;
    text-align: left;
    padding: 0 32px 0 0;
    min-width: 125px;

    &.center {
      text-align: center;
      padding: 0 32px;
    }

    span {
      color: rgba(0, 0, 0, .45);
      display: inline-block;
      font-size: .95rem;
      line-height: 42px;
      margin-bottom: 4px;
    }
    p {
      line-height: 42px;
      margin: 0;
      a {
        font-weight: 600;
        font-size: 1rem;
      }
    }
  }
</style>